<template>
  <div>
    <!--商品页面-->
    <div class="conter goods">
      <!--左侧导航-->
      <el-menu
        default-active="2"
        class="menu-wrapper" ref="menuWrapper"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item
          v-for="(item, index) in lclist.goods"
           :class="{ current: currentIndex === index }"
          :key="index"
          @click="selectMenu(index)"
        >
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
      <!--右侧详情-->
      <div class="rightbigbox foods-wrapper"  ref="foodsWrapper">
        <!--右侧模块-->
        <div v-for="(item, index) in lclist.goods" :key="index" class="food-list food-list-hook">
          <p class="title">{{ item.name }}</p>
          <div v-for="(item, index) in item.foods" :key="index" class="rmbox">
            <!--步进器-->
            <van-stepper v-model="value" theme="round" button-size="16" min="0"/>
            <img :src="item.image" @click="selectFood(index)"/>
            <div class="rmbabybox">
              <p>
                <b>{{ item.name }}</b>
              </p>
              <p>{{ item.description }}</p>
              <p>月售{{ item.sellCount }}份 好评率{{ item.rating }}%</p>
              <p>
                <span
                  ><b>￥{{ item.price }}</b></span
                >
                <span v-show="item.oldPrice"
                  ><b
                    ><s> ￥{{ item.oldPrice }}</s></b
                  ></span
                >
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--购物车-->
    <van-popup v-model="eflag" position="bottom">
      <div class="titletwo">
        <p>购物车</p>
        <p>清空</p>
      </div>
      <div class="commodity">
        <div class="commodityxbox">
          <p>莲子核桃黑米粥</p>
          <div>
            <p>￥10</p>
            <van-stepper
              v-model="value"
              theme="round"
              button-size="22"
              input-width="24px"
            />
          </div>
        </div>
      </div>
      <bottomModule @showPopup="showPopup" />
    </van-popup>
    <!--底部-->
    <bottomModule @showPopup="showPopup" />
  </div>
</template>

<script>
import BScroll from "better-scroll";
import bottomModule from "../index/bottomModule";
export default {
  components: { bottomModule },
  name: "",
  data() {
    return {
      value: 0, //步进器
      active: 1,
      activeKey: 0,
      lclist: [], //左侧导航
      lcheader: {}, //头部数据
      lcright: [], //右侧数据
      flag: true,
      eflag: false, //购物车
      //左右联动
      listHeight: [],
      scrollY: 0,
      goods: [],
    };
  },
  mounted() {
    this.lcgetlist();
    //这里用到一个定时器 等待数据渲染完毕 执行该方法 不然不能滑动 如果是真实数据 这两个方法放在this.$nextTick()里面
    //因为没有真实数据 只能用本地数据模拟下
    setTimeout(() => {
      this.initScroll();
      this.calculateHeight();
    }, 20);
  },
  methods: {
    //获取本地数据
    lcgetlist() {
      this.$axios.get("/json/data.json").then((res) => {
        console.log(res.seller);
        this.lclist = res;
        this.lcheader = res.seller;
      });
    },
    //左侧导航
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //购物车
    showPopup() {
      this.eflag = true;
    },

    //左右联动
    //     设置两边列表可以滚动  内容区要比外层容器要高  列表先渲染 才可以滑动
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true,
      });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 2,
      });
      //右侧表绑定滑动监听
      this.foodsScroll.on("scroll", (pos) => {
        //获取每次滚动的值 绝对值
        this.scrollY = Math.abs(Math.round(pos.y));
      });
      //右侧列表绑定滑动结束监听
      this.foodsScroll.on("scrollEnd", (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
        console.log(this.scrollY);
      });
    },
    calculateHeight() {
      //获取 所有左侧列表class 为 food-list-hook 盒子设置ref
      let foodList = this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
      let height = 0;
      this.listHeight.push(height);
      //伪数组转为真数组 并循环遍历
      Array.prototype.slice.call(foodList).forEach((i) => {
        height += i.clientHeight;
        this.listHeight.push(height);
      });
    },
    //点击左侧列表 右侧列表滑动到指定位置
    selectMenu(index) {
      let foodList = this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
      //scrollToElement可以滑动到指定位置
      this.foodsScroll.scrollToElement(foodList[index], 300);
      //第一个参数对应的食品列表  第二个参数为滑动 动画时长
    },
  },
  computed: {
    //计算得到当前分类下标
    currentIndex() {
      //根据条件计算 产生一个结果 findIndex查找满足条件的下标 没找到返回-1
      const index = this.listHeight.findIndex((item, index) => {
        //如果滚动的距离>=左侧列表当前的高度并且 小于下一项的高度
        return this.scrollY >= item && this.scrollY < this.listHeight[index + 1];
      });
      return index;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.conter {
  display: flex;
  padding: 0px;
  margin-bottom: 48px;
  height: 450px;
  overflow: auto;
  .el-menu {
    padding: 0px;
    width: 110px;
    height: 450px;
    overflow: auto;
    .el-menu-item {
      padding: 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: black;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .rightbigbox {
    width: 100%;
    overflow: auto;
    .title {
      font-size: 12px;
      color: rgb(147, 153, 159);
      border-left: 2px solid #d9dde1;
      height: 26px;
      line-height: 26px;
      padding-left: 14px;
      background-color: #f3f5f7;
    }
  }
}
//右侧盒子模块
.rmbox {
  display: flex;
  position: relative;
  // flex-direction: row-reverse;
  margin: 18px 0 0 18px;
  overflow: auto;
  .van-stepper {
    // margin-left: 118px;
    position: absolute;
    right: 12px;
    bottom: 5px;
    z-index: 3;
  }
  img {
    width: 64px;
    height: 64px;
  }

  .rmbabybox {
    width: 100%;

    p:nth-of-type(1) {
      font-size: 14px;
      line-height: 14px;
      color: rgb(7, 17, 27);
      margin: 0 0 8px 10px;
    }
    p:nth-of-type(2) {
      font-size: 10px;
      line-height: 10px;
      color: rgb(147, 153, 159);
      margin: 0 0 8px 10px;
    }
    p:nth-of-type(3) {
      font-size: 10px;
      line-height: 10px;
      color: rgb(147, 153, 159);
      margin: 0 0 4px 10px;
    }
    p:nth-of-type(4) {
      span:nth-of-type(1) {
        font-size: 14px;
        line-height: 28px;
        color: red;
        font-weight: 700;
        margin: 0 0 4px 10px;
      }
      span:nth-of-type(2) {
        font-size: 10px;
        line-height: 28px;
        color: rgb(147, 153, 159);
        font-weight: 700;
        margin: 0 0 4px 10px;
      }
    }
  }
}
//购物车
.van-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  margin-bottom: 46px;
  .titletwo {
    width: 100%;
    height: 40px;
    background-color: #f3f5f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px 0 18px;
    border-bottom: 2px solid #dddddd;
    p:nth-child(1) {
      font-size: 14px;
      font-weight: 200;
      color: rgb(7, 17, 27);
      line-height: 40px;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: rgb(0, 160, 220);
      line-height: 40px;
    }
  }
  .commodity {
    height: 48px;
    .commodityxbox {
      height: 100%;
      padding: 0 18px 0 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 14px;
        color: rgb(7, 17, 27);
      }
      div {
        display: flex;
        p {
          font-size: 14px;
          color: rgb(240, 20, 20);
          font-weight: 700;
          margin-right: 12px;
        }
      }
    }
  }
}
//公告
#announcement {
  width: 100;
  height: 100%;
  background: rgba(7, 17, 27, 0.9);
  .box {
    h3 {
      font-size: 16px;
      font-weight: 700;
      line-height: 16px;
      color: rgb(255, 255, 255);
      text-align: center;
      margin-left: 24px;
      margin-top: 64px;
      margin-bottom: 16px;
    }
    .imgs {
      display: flex;
      height: 24px;
      justify-content: center;
      margin-bottom: 28px;
      img {
        margin-left: 18px;
      }
    }
    .captionone {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      span {
        color: white;
        font-weight: 700;
        font-size: 16px;
        margin: 0px 12px 0px 12px;
      }
      div {
        width: 112px;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
    .captiontwo {
      margin-top: 28px;
    }
    .lcyh {
      font-size: 12px;
      font-weight: 200;
      color: rgb(255, 255, 255);
      line-height: 12px;
      .lcyhsmall {
        margin-bottom: 12px;
        margin-left: 48px;
        img {
          width: 16px;
          height: 16px;
          margin: 0 6px 0 12px;
        }
      }
    }
    .paragraph {
      font-size: 12px;
      font-weight: 200;
      color: rgb(255, 255, 255);
      line-height: 24px;
      margin-left: 48px;
      margin-right: 48px;
    }
    i {
      font-size: 32px;
      color: rgba(255, 255, 255, 0.5);
      position: fixed;
      bottom: 32px;
      margin-left: 50%;
      transform: translate(-50%);
    }
  }
}
</style>
